<template>
  <view class="page-wrapper page-space">
    <lg-uploader v-model="files1" tips="只能上传图片, 3MB内" size="3MB"/>
    <view class="spacer"></view>
    <lg-uploader v-model="files2" type="video" tips="只能上传视频, 5MB内" size="5MB"/>
    <view class="spacer"></view>
    <lg-uploader v-model="files3" list-type="list" type="all" tips="可上传图片或视频, 5MB内" size="5MB"/>
    <view class="spacer">使用 trigger 插槽</view>
    <lg-uploader v-model="files5" list-type="list" type="all" size="5MB">
      <template #trigger>
        <uni-icons type="plus" size="50" color="#ddd"/>
      </template>
    </lg-uploader>
    <view class="spacer">使用 files 插槽</view>
    <lg-uploader v-model="files6" list-type="list" type="image" size="5MB">
      <template #files="{ files }">
        <img v-for="x in files" :src="x.url" style="width: 100rpx; height: 100rpx;margin: 8rpx" />
      </template>
    </lg-uploader>
    <view class="spacer">使用 custom 插槽</view>
    <lg-uploader v-model="files4" value-type="url" type="image" tips="使用 custom 插槽" size="5MB">
      <template #custom="{ choose, files, upload, remove }">
        <view style="margin: 6rpx; border: 1px solid #ddd; border-radius: 16rpx; width: 200rpx; height: 200rpx; overflow: hidden; display: flex; align-items: center; justify-content: center" @tap="choose">
          <img v-if="files4" :src="files4" style="width: 200rpx; height: 200rpx" />
          <view v-else>
            <uni-icons type="plus" size="50" color="#ddd"/>
          </view>
        </view>
      </template>
    </lg-uploader>
    <view class="spacer"></view>
    <button @tap="submit">提交</button>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useWaitUpload} from "@/soar/hooks/upload";
import LgUploader from "@/soar/components/lg-uploader/index.vue";
import {mustLogin} from "@/store/account";
import message from "@/soar/utils/message";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

mustLogin();

const files1 = ref([]);
const files2 = ref([]);
const files3 = ref([]);
const files4 = ref('');
const files5 = ref([]);
const files6 = ref([]);

const { upload } = useWaitUpload();

function submit() {
  upload().then(res => {
    message.success('操作成功');
  }).finally(() => {
    uni.hideLoading();
  })
  uni.showLoading();
}

</script>

<style scoped>
.spacer {
  margin: 16rpx 0;
  border-top: 1px solid #ddd;
}
</style>
